<template>
  <div class="productBox">
    <div class="topBox">
      <div class="leftBtn">
        <div class="topBtn firstTop">
          <!-- <el-button class="filing-button" type="primary" icon="el-icon-plus">添加妥了网自营店商品</el-button> -->
          <el-button class="filing-button" type="primary" icon="el-icon-plus" @click="addProduct">添加商品</el-button>
        </div>
        <div class="topBtn">
          <el-button class="filing-button" type="primary" @click="downloadExcel">下载EXCEL模板</el-button>
          <el-upload class="upload-box" :action="uploadExcelUrl" name="excel" accept=".xls, .xlsx" :on-success="onUploadSuccess" :show-file-list="false" >
            <el-button class="filing-button" type="primary" slot="trigger">EXCEL导入</el-button>
          </el-upload>
        </div>
      </div>
      <div class="topBtn clearTopBtn">
        <el-button class="filing-button" type="primary" @click="clearAll" plain>清空所有</el-button>
      </div>
    </div>
    <biding-goods-table ref="competeTable" :tableData="reportState.form.filingBidGoodsList"></biding-goods-table>

    <!-- <edit v-if="isShow" :id="stepId" :isTitle="isTitle" :isEditWindow="isEditWindow" @closedWindow="closed" @editdata="editData"></edit> -->
  </div>
</template>

<script>
// import TableList from '@/components/public/TableList.vue'
// import Edit from '@/components/public/component/Edit.vue'
import Http from '@/lib/http'
import BidingGoodsTable from '@/components/public/BidingGoodsTable'
import { useReport } from '@/hooks/report'
import { getCurrentInstance } from '@vue/composition-api'
export default {
  name: 'FilingProduct',
  components: { BidingGoodsTable },
  setup () {
    const vm = getCurrentInstance()
    const validateForm = () => {
      return new Promise(resolve => {
        if (!reportState.form.filingBidGoodsList || !reportState.form.filingBidGoodsList.length) {
          vm.$message.error('请添加商品信息')
        } else {
          resolve(true)
        }
      })
    }
    const { reportState } = useReport(validateForm)
    if (!reportState.form.filingBidGoodsList) {
      vm.$set(reportState.form, 'filingBidGoodsList', [])
    }

    const onUploadSuccess = (res, file, fileList) => {
      console.log(res)

      if (res.success) {
        vm.$message({
          type: 'success',
          message: res.desc,
        })

        res.result.forEach(item => {
          const data = {}
          ;['goodBrand', 'platformId', 'goodName', 'goodModel', 'num', 'unit', 'price'].forEach(key => {
            data[key] = item[key]
          })
          reportState.form.filingBidGoodsList.push(data)
        })
      } else vm.$message.error(res.desc)
    }

    return {
      reportState,
      onUploadSuccess,
    }
  },
  data () {
    return {
      isShow: false, // 显示添加商品时窗口
      isTitle: false, // 展示是 添加商品 还时编辑商品的标题
      isEditWindow: {
        isEditNum: 0, // 要编辑的商品序号
        isEditId: 0, // 要编辑的商品id
      },
      tableDataObj: {
        tableData: [],
        isOperate: true, // 是否要操作按钮
        total: 0, // 总页数
        pageSize: 10, // 每页显示的条数
        pageNum: 1, // 默认第一页
        isShowPages: false, // 是否展示分页
      },
      tableData: [], // 修改后的数据
      uploadExcelUrl: Http.getUrl('/utils/formatExcelToBidGoodInfo'),
      curState:
        this.$store.state.infoStr || sessionStorage.getItem('currentTab'),
      // 竞价数据
      competeData: {
        pageSize: 10,
        pageNum: 1,
        total: 0,
        list: [],
      },
    }
  },

  methods: {
    /**
     * @description:
     * @param {type}
     * @return:
     */
    getReload () {
      this.tableDataObj.pageNum = parseFloat(this.tableDataObj.pageNum - 1)
      this.getEditData(this.stepId)
    },
    /** 获取表格数据
     * param{报备人的id}  filingId
     */
    getEditData (id) {
      if (!id) {
        return
      }
      let url = 'api/createFilingMessage/goodsListMessageQuery/'
      if (this.$store.state.infoStr == 'stepPrice') {
        url = 'api/bid/bidGoodsListMessageQuery/'
      }
      this.$axios
        .get(
          url +
            id +
            '?size=' +
            this.tableDataObj.pageSize +
            '&startPage=' +
            this.tableDataObj.pageNum,
        )
        .then(resp => {
          if (resp.success) {
            if (this.$store.state.infoStr == 'stepOrder') {
              if (!resp.result.filingAuditInfo) {
                return
              }
              this.tableDataObj.tableData = resp.result.filingAuditInfo.list
              this.tableDataObj.total = resp.result.filingAuditInfo.total
              this.tableDataObj.pageSize = resp.result.filingAuditInfo.pageSize
              this.tableDataObj.pageNum = resp.result.filingAuditInfo.pageNum
              this.tableDataObj.isShowPages = true
              this.tableDataObj.tableData.map(item => {
                item.enduringUse = !!item.isEnduringUse
              })
            } else {
              if (!resp.result.filingBidGoodsInfo) {
                return
              }
              this.competeData = resp.result.filingBidGoodsInfo
            }
          }
        })
    },
    editData (bl) {
      if (bl) {
        this.getEditData(this.stepId)
      }
    },
    // 添加商品
    addProduct () {
      this.$refs.competeTable.showAdd()
    },

    clearAll () {
      this
        .$confirm('确认清空所有商品吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
        .then(() => {
          this.reportState.form.filingBidGoodsList = []
        })
        .catch(() => {})
    },

    downloadExcel () {
      window.location.href = 'https://oss.tlwok.com/filing/bidFilingGoodsTemplExcel.xlsx'
    },
  },
}
</script>
<style lang='less' scoped>
.productBox {
  margin: 0 -19px;
  .topBox {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .leftBtn {
      display: flex;
      align-items: center;
    }
    .topBtn {
      display: flex;
      align-items: center;
      .filing-button {
        margin-right: 18px;
        height: 35px;
        padding: 0 20px;
        font-size: 14px;
      }
    }
    .clearTopBtn {
      margin-left: 42px;
    }
    .firstTop {
      margin-right: 60px;
    }
  }
  .marTop {
    margin-top: 40px;
  }
  .empty {
    margin-top: 50px;
    text-align: center;
    padding: 20px 0;
    border-top: 1px solid #bbb;
    .emptyIcon {
      font-size: 64px;
      color: #bbb;
    }
    .txt {
      font-size: 14px;
      color: #bbb;
      margin-top: 30px;
    }
  }
}
.upload-box {
  display: inline-block;
}
</style>
